WebGL klustrad deferred-belysning: Avancerad ljushantering

Inom realtids 3D-grafik spelar belysning en avgörande roll för att skapa realistiska och visuellt tilltalande scener. Medan traditionella metoder för forward rendering kan bli beräkningsmässigt dyra med ett stort antal ljuskällor, erbjuder deferred rendering ett övertygande alternativ. Klustrad deferred-belysning tar detta ett steg längre och erbjuder en effektiv och skalbar lösning för att hantera komplexa belysningsscenarier i WebGL-applikationer.

Förstå deferred rendering

Innan vi dyker in i klustrad deferred-belysning är det avgörande att förstå de grundläggande principerna för deferred rendering. Till skillnad från forward rendering, som beräknar belysningen för varje fragment (pixel) när det rasteriseras, separerar deferred rendering geometri- och belysningspassen. Här är en genomgång:

1. Geometripass (Skapande av G-buffer): I det första passet renderas scenens geometri till flera renderingsmål, gemensamt kända som G-buffer. Denna buffert lagrar vanligtvis information som:
   • Djup: Avstånd från kameran till ytan.
   • Normaler: Ytans orientering.
   • Albedo: Ytans grundfärg.
   • Spekulär: Spekulär högdagerns färg och intensitet.
2. Belysningspass: I det andra passet används G-bufferten för att beräkna belysningsbidraget för varje pixel. Detta gör att vi kan skjuta upp de dyra belysningsberäkningarna tills vi har all nödvändig ytinformation.

Deferred rendering erbjuder flera fördelar:

• Minskad overdraw: Belysningsberäkningar utförs endast en gång per pixel, oavsett antalet ljuskällor som påverkar den.
• Förenklade belysningsberäkningar: All nödvändig ytinformation är lättillgänglig i G-bufferten, vilket förenklar belysningsekvationerna.
• Frikopplad geometri och belysning: Detta möjliggör mer flexibla och modulära renderingspipelines.

Standard deferred rendering kan dock fortfarande möta utmaningar när man hanterar ett mycket stort antal ljuskällor. Det är här klustrad deferred-belysning kommer in i bilden.

Introduktion till klustrad deferred-belysning

Klustrad deferred-belysning är en optimeringsteknik som syftar till att förbättra prestandan hos deferred rendering, särskilt i scener med många ljuskällor. Kärniden är att dela upp synfrustumen i ett rutnät av 3D-kluster och tilldela ljus till dessa kluster baserat på deras spatiala placering. Detta gör att vi effektivt kan avgöra vilka ljus som påverkar vilka pixlar under belysningspasset.

Hur klustrad deferred-belysning fungerar

1. Indelning av synfrustum: Synfrustumen delas in i ett 3D-rutnät av kluster. Dimensionerna på detta rutnät (t.ex. 16x9x16) bestämmer granulariteten för klustringen.
2. Ljustilldelning: Varje ljuskälla tilldelas de kluster som den skär. Detta kan göras genom att kontrollera ljusets omslutande volym mot klustergränserna.
3. Skapande av klusterljuslista: För varje kluster skapas en lista över de ljus som påverkar det. Denna lista kan lagras i en buffert eller textur.
4. Belysningspass: Under belysningspasset, för varje pixel, bestämmer vi vilket kluster den tillhör och itererar sedan över ljusen i det klustrets ljuslista. Detta minskar avsevärt antalet ljus som behöver beaktas för varje pixel.

Fördelar med klustrad deferred-belysning

• Förbättrad prestanda: Genom att minska antalet ljus som beaktas per pixel kan klustrad deferred-belysning avsevärt förbättra renderingsprestandan, särskilt i scener med ett stort antal ljuskällor.
• Skalbarhet: Prestandavinsterna blir mer uttalade när antalet ljuskällor ökar, vilket gör det till en skalbar lösning för komplexa belysningsscenarier.
• Minskad overdraw: Liksom standard deferred rendering minskar klustrad deferred-belysning overdraw genom att utföra belysningsberäkningar endast en gång per pixel.

Implementering av klustrad deferred-belysning i WebGL

Implementering av klustrad deferred-belysning i WebGL innefattar flera steg. Här är en övergripande översikt över processen:

1. Skapande av G-buffer: Skapa G-buffer-texturerna för att lagra nödvändig ytinformation (djup, normaler, albedo, spekulär). Detta involverar vanligtvis användning av flera renderingsmål (MRT).
2. Klustergenerering: Definiera klusterrutnätet och beräkna klustergränserna. Detta kan göras i JavaScript eller direkt i shadern.
3. Ljustilldelning (CPU-sidan): Iterera över ljuskällorna och tilldela dem till lämpliga kluster. Detta görs vanligtvis på CPU:n eftersom det bara behöver beräknas när ljus rör sig eller ändras. Överväg att använda en spatial accelerationsstruktur (t.ex. en omslutande volymhierarki eller ett rutnät) för att påskynda ljustilldelningsprocessen, särskilt med ett stort antal ljus.
4. Skapande av klusterljuslista (GPU-sidan): Skapa en buffert eller textur för att lagra ljuslistorna för varje kluster. Överför ljusindexen som tilldelats varje kluster från CPU:n till GPU:n. Detta kan uppnås med ett texture buffer object (TBO) eller ett storage buffer object (SBO), beroende på WebGL-version och tillgängliga extensioner.
5. Belysningspass (GPU-sidan): Implementera belysningspass-shadern som läser från G-bufferten, bestämmer klustret för varje pixel och itererar över ljusen i klustrets ljuslista för att beräkna den slutliga färgen.

Kodexempel (GLSL)

Här är några kodavsnitt som illustrerar viktiga delar av implementeringen. Observera: dessa är förenklade exempel och kan kräva justeringar baserat på dina specifika behov.

G-Buffer Fragment Shader

#version 300 es

in vec3 vNormal;
in vec2 vTexCoord;

layout (location = 0) out vec4 outAlbedo;
layout (location = 1) out vec4 outNormal;
layout (location = 2) out vec4 outSpecular;

uniform sampler2D uTexture;

void main() {
  outAlbedo = texture(uTexture, vTexCoord);
  outNormal = vec4(normalize(vNormal), 0.0);
  outSpecular = vec4(0.5, 0.5, 0.5, 32.0); // Exempel på spekulär färg och glansighet
}

Lighting Pass Fragment Shader

#version 300 es

in vec2 vTexCoord;

layout (location = 0) out vec4 outColor;

uniform sampler2D uAlbedo;
uniform sampler2D uNormal;
uniform sampler2D uSpecular;
uniform sampler2D uDepth;

uniform samplerBuffer uLightListBuffer;
uniform vec3 uLightPositions[MAX_LIGHTS];
uniform vec3 uLightColors[MAX_LIGHTS];

uniform int uClusterGridSizeX;
uniform int uClusterGridSizeY;
uniform int uClusterGridSizeZ;

uniform mat4 uInverseProjectionMatrix;

#define MAX_LIGHTS 256 //Exempel, måste definieras och vara konsekvent

// Funktion för att återskapa världsposition från djup och skärmkoordinater
vec3 reconstructWorldPosition(float depth, vec2 screenCoord) {
    vec4 clipSpacePosition = vec4(screenCoord * 2.0 - 1.0, depth, 1.0);
    vec4 viewSpacePosition = uInverseProjectionMatrix * clipSpacePosition;
    return viewSpacePosition.xyz / viewSpacePosition.w;
}

// Funktion för att beräkna klusterindex baserat på världsposition
int calculateClusterIndex(vec3 worldPosition) {
    // Transformera världsposition till view space
    vec4 viewSpacePosition = uInverseViewMatrix * vec4(worldPosition, 1.0);

    // Beräkna normaliserade enhetskoordinater (NDC)
    vec3 ndcPosition = viewSpacePosition.xyz / viewSpacePosition.w; //Perspektivdivision

    //Transformera till [0, 1]-intervall
    vec3 normalizedPosition = ndcPosition * 0.5 + 0.5;

    // Kläm för att undvika åtkomst utanför gränserna
    normalizedPosition = clamp(normalizedPosition, vec3(0.0), vec3(1.0));

    // Beräkna klusterindex
    int clusterX = int(normalizedPosition.x * float(uClusterGridSizeX));
    int clusterY = int(normalizedPosition.y * float(uClusterGridSizeY));
    int clusterZ = int(normalizedPosition.z * float(uClusterGridSizeZ));

    // Beräkna det 1D-indexet
    return clusterX + clusterY * uClusterGridSizeX + clusterZ * uClusterGridSizeX * uClusterGridSizeY;
}


void main() {
  float depth = texture(uDepth, vTexCoord).r;
  vec3 normal = normalize(texture(uNormal, vTexCoord).xyz);
  vec3 albedo = texture(uAlbedo, vTexCoord).rgb;
  vec4 specularData = texture(uSpecular, vTexCoord);
  float shininess = specularData.a;
  float specularIntensity = 0.5; // förenklad spekulär intensitet


  // Återskapa världsposition från djup
  vec3 worldPosition = reconstructWorldPosition(depth, vTexCoord);

  // Beräkna klusterindex
  int clusterIndex = calculateClusterIndex(worldPosition);

  // Bestäm start- och slutindex för ljuslistan för detta kluster
    int lightListOffset = clusterIndex * 2; // Antar att varje kluster lagrar start- och slutindex
    int startLightIndex = int(texelFetch(uLightListBuffer, lightListOffset).r * float(MAX_LIGHTS)); //Normalisera ljusindex till [0, MAX_LIGHTS]
    int numLightsInCluster = int(texelFetch(uLightListBuffer, lightListOffset + 1).r * float(MAX_LIGHTS));


  // Ackumulera belysningsbidrag
  vec3 finalColor = vec3(0.0);
  for (int i = 0; i < numLightsInCluster; ++i) {
        int lightIndex = startLightIndex + i;
        if (lightIndex >= MAX_LIGHTS) break; // Säkerhetskontroll för att förhindra åtkomst utanför gränserna

        vec3 lightPosition = uLightPositions[lightIndex];
        vec3 lightColor = uLightColors[lightIndex];

        vec3 lightDirection = normalize(lightPosition - worldPosition);
        float distanceToLight = length(lightPosition - worldPosition);

        //Enkel diffus belysning
        float diffuseIntensity = max(dot(normal, lightDirection), 0.0);
        vec3 diffuse = diffuseIntensity * lightColor * albedo;

        //Enkel spekulär belysning
        vec3 reflectionDirection = reflect(-lightDirection, normal);
        float specularHighlight = pow(max(dot(reflectionDirection, normalize(-worldPosition)), 0.0), shininess);
        vec3 specular = specularIntensity * specularHighlight * specularData.rgb * lightColor;

        float attenuation = 1.0 / (distanceToLight * distanceToLight); // Enkel dämpning


        finalColor += (diffuse + specular) * attenuation;
  }

  outColor = vec4(finalColor, 1.0);
}

Viktiga överväganden

• Klusterstorlek: Valet av klusterstorlek är avgörande. Mindre kluster ger bättre culling men ökar antalet kluster och overhead för att hantera klusterljuslistorna. Större kluster minskar overhead men kan leda till att fler ljus beaktas per pixel. Experimentering är nyckeln till att hitta den optimala klusterstorleken för din scen.
• Optimering av ljustilldelning: Att optimera ljustilldelningsprocessen är avgörande för prestandan. Användning av spatiala datastrukturer (t.ex. en omslutande volymhierarki eller ett rutnät) kan avsevärt påskynda processen att hitta vilka kluster ett ljus skär.
• Minnesbandbredd: Var medveten om minnesbandbredden när du kommer åt G-bufferten och klusterljuslistorna. Att använda lämpliga texturformat och komprimeringstekniker kan hjälpa till att minska minnesanvändningen.
• WebGL-begränsningar: Äldre WebGL-versioner kan sakna vissa funktioner (som storage buffer objects). Överväg att använda extensioner eller alternativa metoder för att lagra ljuslistorna. Se till att din implementering är kompatibel med målversionen av WebGL.
• Prestanda på mobila enheter: Klustrad deferred-belysning kan vara beräkningsintensiv, särskilt på mobila enheter. Profilera din kod noggrant och optimera för prestanda. Överväg att använda lägre upplösningar eller förenklade belysningsmodeller på mobila enheter.

Optimeringstekniker

Flera tekniker kan användas för att ytterligare optimera klustrad deferred-belysning i WebGL:

• Frustum culling: Innan du tilldelar ljus till kluster, utför frustum culling för att kassera ljus som är helt utanför synfrustumen.
• Backface culling: Kasta bort bakåtvända trianglar under geometripasset för att minska mängden data som skrivs till G-bufferten.
• Level of Detail (LOD): Använd olika detaljnivåer för dina modeller baserat på deras avstånd från kameran. Detta kan avsevärt minska mängden geometri som behöver renderas.
• Texturkomprimering: Använd texturkomprimeringstekniker (t.ex. ASTC) för att minska storleken på dina texturer och förbättra minnesbandbredden.
• Shader-optimering: Optimera din shader-kod för att minska antalet instruktioner och förbättra prestandan. Detta inkluderar tekniker som loop unrolling, instruktionsschemaläggning och minimering av förgreningar.
• Förberäknad belysning: Överväg att använda förberäknade belysningstekniker (t.ex. lightmaps eller sfäriska harmonier) för statiska objekt för att minska realtidsbelysningsberäkningarna.
• Hårdvaruinstansiering: Om du har flera instanser av samma objekt, använd hårdvaruinstansiering för att rendera dem mer effektivt.

Alternativ och avvägningar

Även om klustrad deferred-belysning erbjuder betydande fördelar, är det viktigt att överväga alternativ och deras respektive avvägningar:

• Forward Rendering: Även om det är mindre effektivt med många ljus, kan forward rendering vara enklare att implementera och kan vara lämpligt för scener med ett begränsat antal ljuskällor. Det hanterar också transparens lättare.
• Forward+ Rendering: Forward+ rendering är ett alternativ till deferred rendering som använder compute shaders för att utföra ljusculling före forward rendering-passet. Detta kan erbjuda liknande prestandafördelar som klustrad deferred-belysning. Det kan vara mer komplext att implementera och kan kräva specifika hårdvarufunktioner.
• Tiled Deferred Lighting: Tiled deferred-belysning delar upp skärmen i 2D-rutor istället för 3D-kluster. Detta kan vara enklare att implementera än klustrad deferred-belysning, men det kan vara mindre effektivt för scener med betydande djupvariation.

Valet av renderingsteknik beror på de specifika kraven för din applikation. Tänk på antalet ljuskällor, komplexiteten i scenen och målhårdvaran när du fattar ditt beslut.

Slutsats

WebGL klustrad deferred-belysning är en kraftfull teknik för att hantera komplexa belysningsscenarier i webbaserade grafikapplikationer. Genom att effektivt culla ljus och minska overdraw kan den avsevärt förbättra renderingsprestanda och skalbarhet. Även om implementeringen kan vara komplex, gör fördelarna i termer av prestanda och visuell kvalitet det till en värdefull ansträngning för krävande applikationer som spel, simuleringar och visualiseringar. Noggrant övervägande av klusterstorlek, optimering av ljustilldelning och minnesbandbredd är avgörande för att uppnå optimala resultat.

I takt med att WebGL fortsätter att utvecklas och hårdvarukapaciteten förbättras, kommer klustrad deferred-belysning sannolikt att bli ett allt viktigare verktyg för utvecklare som strävar efter att skapa visuellt imponerande och presterande webbaserade 3D-upplevelser.

Ytterligare resurser

• WebGL-specifikationen: https://www.khronos.org/webgl/
• OpenGL Insights: En bok med kapitel om avancerade renderingstekniker, inklusive deferred rendering och clustered shading.
• Forskningsartiklar: Sök efter akademiska artiklar om klustrad deferred-belysning och relaterade ämnen på Google Scholar eller liknande databaser.